//登陆控制隐藏显示
//获取登陆按钮
var loginBtn = document.querySelector('header .member>div')
loginBtn.onclick = function () {
  var loginDialog = document.querySelector('section.login')
  loginDialog.style.visibility = 'visible'
}
var loginClose = document.querySelector('section div p>.iconfont')
loginClose.onclick = function () {
  var loginDialog = document.querySelector('section.login')
  loginDialog.style.visibility = 'hidden'
}

//点击登陆弹窗蓝色区域实现跟随鼠标移动
var divMenu = document.querySelector('.menu')
divMenu.onmousedown = function (evt) {
  var olde = evt || window.event
  document.onmousemove = function (evt) {
    var e = evt || window.event
    var left = e.clientX - olde.offsetX
    var top = e.clientY - olde.offsetY
    var loginDialog = document.querySelector('section.login .item')
    if (left < 0) left = 0
    if (top < 0) top = 0
    var maxLeft = (window.innerWidth || document.documentElement.clientWidth) - loginDialog.offsetWidth
    var maxTop = (window.innerHeight || document.documentElement.clientHeight) - loginDialog.offsetHeight
    if (left > maxLeft) left = maxLeft
    if (top > maxTop) top = maxTop
    loginDialog.style.position = 'absolute'
    loginDialog.style.left = left + 'px'
    loginDialog.style.top = top + 'px'
  }
}
divMenu.onmouseup = function () {
  document.onmousemove = null
}

//点击获取验证码实现倒计时效果


//登陆表单验证
var submitBtn = document.querySelector('section button.submit')
submitBtn.onclick = function () {
  var phoneInput = document.querySelector('section div.form input.mobile')
  var pwdInput = document.querySelector('section div.form input.password')
  var p1 = document.querySelector('section.login .item div.form p:nth-of-type(3)')
  var p2 = document.querySelector('section.login .item div.form p:nth-of-type(4)')
  console.log(p1, p2);
  if (phoneInput.value == '' || phoneInput.value.length != 11) {
    p1.innerText = '请输入正确的手机号'
  }
  if (pwdInput.value == '' || pwdInput.value.length != 4) {
    p2.innerText = '请输入正确的验证码'
  }
}
//行为验证码
var captcha = document.querySelector('section.captcha')
var countBtn = document.querySelector('section button.captcha')
countBtn.onclick = function () {
  captcha.style.visibility = 'visible'
  var i = document.querySelector('section h2>i.iconfont')
  // 获取拖拽按钮
  var dragBtn = document.querySelector('section.captcha div.drag .btn')
  dragBtn.onmousedown = function () {
    document.onmousemove = function (evt) {
      var e = evt || window.event
      var left = e.clientX - 760 - dragBtn.offsetWidth / 2
      console.log(left);
      dragBtn.style.left = left + 'px'
      document.querySelector('section.captcha div.check img:nth-of-type(2)').style.left = left + 'px'
    }
    document.onmouseup = function () {
      document.onmousemove = null
      var value = parseInt(dragBtn.style.left)
      if (value >= 258 && value <= 265) {
        var countBtn = document.querySelector('section button.captcha')
        var num = 5
        var t

        if (num != 5) return
        countBtn.innerHTML = num + '秒后重发'
        t = setInterval(function () {
          num--
          countBtn.innerHTML = num + '秒后重发'
          if (num == 0) {
            clearInterval(t)
            countBtn.innerHTML = '重新发送'
            num = 5
            return
          }
        }, 1000)
        captcha.style.visibility = 'hidden'
      }
      dragBtn.style.left = '0px'
      document.querySelector('section.captcha div.check img:nth-of-type(2)').style.left = '0px'
    }

  }
  i.onclick = function () {
    captcha.style.visibility = 'hidden'
  }
}



